<!--
 * @Author: your name
 * @Date: 2021-09-10 10:56:56
 * @LastEditTime: 2021-09-10 15:03:05
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup\6-jQuery\day01\7-效果.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>效果</title>
    <script src="../js/jquery.js"></script>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <div>
        <p>这是一段文本</p>
        <button id="hide">隐藏</button>
        <br>
        <button style="display:none" id="show">显示</button>
        <button id="btn">按钮</button>
    </div>
    <div>
        <div id="div1"></div>
        <button id="div1_btn1">div1_btn1</button>
        <button id="div1_btn2">div1_btn2</button>
        <button id="div1_btn3">div1_btn3</button>
    </div>
</body>
<script>
    //链式调用
    $("#div1").css("background-color", "orange").slideUp(2000)
        .slideDown(2000).fadeOut(2000).fadeIn(2000);
    //淡入淡出
    $("#div1_btn1").click(
        function() {
            $("#div1").fadeOut();
        }
    )
    $("#div1_btn2").click(
            function() {
                $("#div1").fadeIn();
            }
        )
        //滑动
    $("#div1_btn3").click(
            function() {
                $("#div1").slideToggle();
            }
        )
        // $("#hide").click(
        //     function() {
        //         $(this).hide(1000);
        //         $("p").hide(1000);
        //         $("#show").show(1000);
        //     }
        // )
        // $("#show").click(
        //     function() {
        //         $(this).hide(1000);
        //         $("p").show(1000);
        //         $("#hide").show(1000);
        //     }
        // )
    $("#btn").click(
        function() {
            $("p").toggle(1000, function() {
                console.log("元素显示状态被切换");
            });
        }
    );
</script>

</html>